<template>
	<div>
        <van-nav-bar
			title="签到信息"
			left-arrow
			left-text="返回"
			fixed
			@click-left="$router.go(-1)"
		/>		
		<!-- ↓↓↓↓ 教师的页面 -->
        <div >
            <van-cell-group title="未签到">     
                <h4 v-if="stuNonSignInInfo.length === 0">无</h4>                         
                <van-swipe-cell v-for="(s,index) in stuNonSignInInfo" :key="index">                  
                    <van-row type="flex" justify="center">
                        <van-col span="4">
                            <van-image
                                width="4rem"
                                height="4rem"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                            />
                        </van-col>
                        <van-col span="18" >                            
                                <van-cell value="左滑补签"  size="large"  :label="s.no" center>
                                    <!-- 使用 title 插槽来自定义标题 -->
                                    <template #title>
                                        
                                        <span class="custom-title" > {{s.name}} </span>
                                        <van-tag type="success"></van-tag>
                                    </template>
                                </van-cell>                      
                        </van-col>
                    </van-row>     
                    <template #right>                        
                        <van-button square type="primary" text="补签" @click="buQian(s.studentId)" />
                    </template>               
                </van-swipe-cell>
                
            </van-cell-group>
            <van-cell-group title="已签到">
                <h4 v-if="stuSignInInfo.length === 0">无</h4>
 <!-- <van-cell v-for="(c,index) in courseInfo.records" :title="c.name" :key="index" 
									value="" :label="c.title" icon="photo-fail" center is-link @click="goDetailBanke(c)"/> -->
                <van-swipe-cell v-for="(s,index) in stuSignInInfo" :key="index">                  
                    <van-row type="flex" justify="center">
                        <van-col span="4">
                            <van-image
                                width="4rem"
                                height="4rem"
                                src="https://portrait.gitee.com/uploads/avatars/user/263/789743_licoy_1578932889.png!avatar60"
                            />
                        </van-col>
                        <van-col span="18" >                            
                                <van-cell :value="s.distance!=undefined?parseInt(s.distance)+'m':'补签'"  size="large"  :label="s.no" center>
                                    <!-- 使用 title 插槽来自定义标题 -->
                                    <template #title>
                                        <!-- <span class="custom-title"> 200327123 </span> -->
                                        <span class="custom-title" > {{s.name}} </span>
                                        <van-tag type="success"></van-tag>
                                    </template>
                                </van-cell>                      
                        </van-col>
                    </van-row>
                    <template #right>                        
                        <van-button square type="primary" text="取消签到" @click="quXiaoQianDao(s.studentId)" />
                    </template> 
                </van-swipe-cell>      
            </van-cell-group>
        </div>
	</div>

    
</template>

<script>
    import {  signInForTeacher, viewSignInList ,signInCancelForTeacher} from '@/api/signIn.js';  
	export default {
		components: {
			
		},
        created() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.detailBankeInfo = JSON.parse(localStorage.getItem('detailBankeInfo'));
            this.signInInfo = JSON.parse(localStorage.getItem('signInInfo'));
            // this.viewSignInForTeacherAll(this.signInInfo.id);
            // this.viewNonSignInForTeacherAll(this.signInInfo.id);
            viewSignInList(this.signInInfo.id).then(res => {
                console.log(res);
                if(res.data.code === 0) {
                    for(let data of res.data.data){
                        if(data.flag) { // 说明签到了
                             this.stuSignInInfo.push(data);
                        } else { // 说明没签到
                            this.stuNonSignInInfo.push(data);
                        }
                    }
                }
            }).catch(err => console.log(err))
        },
		data() {
			return {				      
				userInfo: {},
                detailBankeInfo: {},
                taskTotal: 20,
                stuSignInInfo: [],
                stuNonSignInInfo: []
			}
		},
		computed: {
			finishSignInMsg(s) {
                if(s.position) {
                    return '补签';
                } else {
                    return s.position + 'm';
                }
            }
		},
		methods: {
			// async viewSignInForTeacherAll(taskId) {
            //     this.stuSignInInfo = [];
            //     let curPage = 1;
            //     this.taskTotal = 10;                
            //     while(this.taskTotal > (curPage-1)*10) {
            //         await viewSignInForTeacher(curPage ,10 ,taskId).then(res => {
            //             console.log(res);
            //             if(res.data.code === 0) {
            //                 this.taskTotal = res.data.data.total;
            //                 for(let r of res.data.data.records) {
            //                     this.stuSignInInfo.push(r);
            //                 }                                                   
            //             } else {
            //                 this.taskTotal = 0;
            //             }
            //         }).catch(err => console.log(err));
            //         curPage++;
            //     }                
            // },
            // async viewNonSignInForTeacherAll(taskId) {
            //     this.stuNonSignInInfo = [];
            //     let curPage = 1;  
            //     this.taskTotal = 10;              
            //     while(this.taskTotal > (curPage-1)*10) {
            //         await viewNonSignInForTeacher(curPage ,10 ,taskId).then(res => {
            //             console.log(res);
            //             if(res.data.code === 0) {
            //                 this.taskTotal = res.data.data.total;
            //                 for(let r of res.data.data.records) {
            //                     this.stuNonSignInInfo.push(r);
            //                 }
                                                   
            //             } else {
            //                 this.taskTotal = 0;
            //             }
            //         }).catch(err => console.log(err));
            //         curPage++;
            //     }                
            // },
            buQian(studentId) {
                signInForTeacher(this.signInInfo.id, studentId ).then(res => {
                    console.log(res);
                    if(res.data.code === 0) {
                        console.log('补签成功');
                        this.stuSignInInfo = [],
                        this.stuNonSignInInfo = [],
                        // this.viewSignInForTeacherAll(this.signInInfo.id);
                        // this.viewNonSignInForTeacherAll(this.signInInfo.id);    
                        viewSignInList(this.signInInfo.id).then(res => {
                            console.log(res);
                            if(res.data.code === 0) {
                                for(let data of res.data.data){
                                    if(data.flag) { // 说明签到了
                                            this.stuSignInInfo.push(data);
                                    } else { // 说明没签到
                                        this.stuNonSignInInfo.push(data);
                                    }
                                }
                            }
                        }).catch(err => console.log(err))                        
                    } 
                }).catch(err => console.log(err));
            },
            quXiaoQianDao(studentId) {
                signInCancelForTeacher(this.signInInfo.id, studentId).then(res => {
                    console.log(res);
                    if(res.data.code === 0) {
                        console.log('取消成功');
                        this.stuSignInInfo = [],
                        this.stuNonSignInInfo = [],
                        // this.viewSignInForTeacherAll(this.signInInfo.id);
                        // this.viewNonSignInForTeacherAll(this.signInInfo.id);    
                        viewSignInList(this.signInInfo.id).then(res => {
                            console.log(res);
                            if(res.data.code === 0) {
                                for(let data of res.data.data){
                                    if(data.flag) { // 说明签到了
                                            this.stuSignInInfo.push(data);
                                    } else { // 说明没签到
                                        this.stuNonSignInInfo.push(data);
                                    }
                                }
                            }
                        }).catch(err => console.log(err))                        
                    } 
                }).catch(err => console.log(err));
            }
            
		}
	}
</script>

<style>
    
</style>
